<template>
  <div style="margin-left:0px;margin-right:20px;margin-top:30px;margin-bottom:30px;">
    <el-form :model="formData" label-width="100px" ref="ruleForm" size="small" :rules="rules" :hide-required-asterisk="true">

      <el-row :gutter="28">
        <div class="clearfix1">

          <el-col :xs="24" :sm="14" :md="14" :lg="5" :xl="6">
            <el-form-item :label="$t('common.start_delay')" class="inputPadding">
              <el-input type="number" v-model="formData.delayTime">
                <template slot="append">min</template>
              </el-input>
            </el-form-item>
          </el-col>
        </div>
        <el-col :xs="3" :sm="2" :md="2" :lg="2" :xl="2" :offset="1">
          <el-form-item label="" label-width="0">
            <el-checkbox v-model="formData.isActive" @change="changeCheck">{{$t('common.enable')}}</el-checkbox>
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider></el-divider>
      <el-row :gutter="35">
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <el-form-item label-width="0">
            <!-- <el-checkbox v-model="formData.confirm"> -->
            <p style="font-weight: bold">{{$t('recipe.phase_info')}}</p>
            <!-- </el-checkbox> -->
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="16" :xl="24">
          <el-form-item :label="$t('common.operating_instructions')">
            <el-input rows="3" type="textarea" v-model="formData.guideInfo" placeholder="" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="16" :xl="24">
          <el-form-item :label="$t('basic.remarks')">
            <el-input rows="3" type="textarea" v-model="formData.flastModifyComment" placeholder="" clearable></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

  </div>
</template>

<script>
import { formula } from "@/api/formula"
export default {
  props: {
    tdIndex: Number,
    stepObj: Object,
  },
  data () {
    return {
      screenWidth: document.body.clientWidth,
      formData: {
        phaseDesc: "信息提示",
        isActive: false,
        delayTime: "",
        mode: "",
        stepNo: "",
        flastModifyComment: "",
        guideInfo: "",
      },
      loading: false,
      stepLoading: false,
      rules: {

      },
      list: [],
      phaseId: "",
    }
  },
  watch: {
    screenWidth (val) {
      this.screenWidth = Number(val)
    },
    stepObj (val) {
      if (val)
        this.getPhaseAdm()
    }
  },
  mounted () {
    const that = this
    window.addEventListener('resize', function () {
      that.screenWidth = document.body.offsetWidth;
    })
    this.getPhaseAdm()
  },
  created () {

  },
  methods: {
    getPhaseAdm () {

      if (this.stepObj) {
        // this.phaseAdmList()
        this.radioId = ''
        this.formData.stepDesc = this.stepObj.stepDesc
        this.formData.isActive = this.stepObj.isActive == 1 ? true : false
        this.formData.seqNo = this.tdIndex
        this.formData.stepNo = this.tdIndex
        this.formData.mode = this.stepObj.mode == 1 ? true : false
        this.formData.isAuto = this.stepObj.isAuto == 1 ? true : false
        this.formData.checks = this.stepObj.checks == 1 ? true : false
        this.formData.delayTime = this.stepObj.delayTime ?? 0
        this.formData.fid = this.stepObj.fid
        this.formData.phaseDesc = this.stepObj.texts
        this.formData.reasGrpId = this.stepObj.reasGrpId
        this.formData.flastModifyComment = this.stepObj.flastModifyComment
        this.formData.guideInfo = this.stepObj.guideInfo
        this.formData.stepSort = this.stepObj.stepSort ?? 0
      } else {
        this.tableData = []
        // this.pager.total = 0
      }

    },
    phaseAutoFind () {
      const param = {
        phaseVo: {
          stepId: this.stepObj.fid
        }
      }
      formula.phaseInfoList(param).then(res => {
        if (res.code == 200) {
          if (res.data.rows.length > 0) {
            this.list = res.data.rows
            this.formData = Object.assign({}, res.data.rows[0])
            this.formData.stepDesc = this.stepObj.stepDesc
            this.formData.phaseDesc = "信息提示"
            this.formData.seqNo = this.tdIndex
          }

        }
      })
    },
    handleConfirm (formName) {

      this.$refs[formName].validate((valid) => {
        if (valid) {

          let param = {}
          Object.assign(param, this.stepObj)

          param.delayTime = this.formData.delayTime
          param.flastModifyComment = this.formData.flastModifyComment
          param.guideInfo = this.formData.guideInfo
          param.isActive = this.formData.isActive ? 1 : 0
          param.fLastModifyTime = ''

          this.loading = true
          formula.phaseInfoAdd(param).then(res => {
            this.loading = false
            if (res.code == 200) {
              let obj = {
                mode: this.stepObj.mode,
                isAuto: this.formData.isAuto == false ? 0 : 1,
                isActive: this.formData.isActive == false ? 0 : 1,
                operationId: this.stepObj.operationId,
                seqNo: this.stepObj.seqNo,
                serialNo: this.stepObj.serialNo,
                text: this.stepObj.phaseDesc
              }
            } else {
              this.$message.error(res.msg);
            }
          })
        }
      })
    },
    handleIsAuto (val) {
      this.$forceUpdate()
    },
    changeCheck (val) {
      this.$forceUpdate()
    },
  }
}
</script>
